<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>03.custom-component-simple-global</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
        </div>

        <script type="text/javascript">
            // TODO:组件的简便创建模式，实现全局注册
            Vue.Component('MyComponent', {
                data() {
                    return {
                        title:'The VueJs Instance',
                    };
                },
                tmeplate:`
                <div>
                        <h1>{{ title }}</h1>
                        <button @click="title = 'changed'">修改标题</button>
                    </div>
                `
            })
            let vm = new Vue({
                el: '#app',
            });
        </script>
    </body>
</html>
